<script setup lang="ts">
import { useList } from '~comp-b/global-popups/invitation/hooks';
import circleCheck from '~/assets/imgs/invitation-spin/circle-check.png';

const { difference, status, amount, currency, withdrawAmount } = useList();
const current = computed(() => {
  if ((status.value?.withdraw_status ?? 0) > 3) {
    return 3;
  }
  if ((status.value?.withdraw_status ?? 0) === 0) {
    return null;
  }
  return (status.value?.withdraw_status ?? 0);
});
</script>

<template>
  <TCard>
    <template #header>
      <div class="mb-2 text-sm text-sys-text-body font-semibold">
        {{ $t('jsSd969QnjfUdyEpXn2M') }}
      </div>
    </template>
    <ASteps
      direction="vertical"
      class="ant-cover__steps-cashwheel"
      size="small"
      :current="current"
    >
      <AStep :title="$t('cGgy7I7q8nIaSksuH711c')">
        <template #icon>
          <img v-if="current >= 0 && amount > 0" :src="circleCheck" class="w-5 object-cover lt-tabletl:w-4">
          <div v-else class="h-5 w-5 rounded-[50%] bg-white lt-tabletl:(h-4 w-4)" />
        </template>
      </AStep>
      <AStep>
        <template #title>
          <I18nT keypath="agTwCh4pZ9FkrKsXbcHe" tag="p" class="text-white">
            <template #diff>
              <TNum class="text-white" format="clamp-dec" :decimals="2" :value="difference" />
            </template>
          </I18nT>
        </template>
        <template #icon>
          <img v-if="current >= 1 " :src="circleCheck" class="w-5 object-cover lt-tabletl:w-4">
          <div v-else class="h-5 w-5 rounded-[50%] bg-white lt-tabletl:(h-4 w-4)" />
        </template>
      </AStep>
      <AStep :title="$t('a6mJxoOgcf9HIlG0WWqd', { currency, amount: withdrawAmount })">
        <template #icon>
          <img v-if="current >= 3 " :src="circleCheck" class="w-5 object-cover lt-tabletl:w-4">
          <div v-else class="h-5 w-5 rounded-[50%] bg-white lt-tabletl:(h-4 w-4)" />
        </template>
      </AStep>
    </ASteps>
  </TCard>
</template>

<style lang="scss">
.ant-steps.ant-cover__steps-cashwheel {
  .ant-steps-item-tail {
    left: 9px !important;
    @media bp-lt-tabletl {
      left: 7px !important;
    }
  }
  .ant-steps-item-tail::after {
    background: none;
    background-color: unset !important;
    border: 1px dashed #b91b1b;
  }
  .ant-steps-item-container {
    .ant-steps-item-title {
      --uno: '!text-white';
    }
  }
}
</style>
